<template>
  <div class="goods-view" v-if="subcategoryList.length">
    <div class="goods-view-item" v-for="(item,index) in subcategoryList" :key="index"
         :style="{width: (100 / cols) + '%'}">
      <a :href="item.link">
        <img :src="item.image" alt="" @load="goodsViewImgLoad">
        <p>{{ item.title }}</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsView",
  props: {
    cols: {
      type: Number,
      default: 3
    },
    subcategoryList: {
      type: Array,
      default() {
        return []
      }
    },
  },
  methods: {
    goodsViewImgLoad() {
      this.$bus.$emit("categoryImgLoad");
    }
  }
}
</script>

<style scoped>
.goods-view {
  padding: 15px 5px;
  display: flex;
  flex-wrap: wrap;
}

.goods-view .goods-view-item {
  padding: 5px 10px;
  text-align: center;
  font-size: 12px;
}

.goods-view .goods-view-item img {
  width: 100%;
}

.goods-view .goods-view-item p {
  margin: 10px 0;
}
</style>